import React, { useRef, useState } from 'react';

import { Button, message } from 'antd';

import MyTable from '@/components/MyTable';
import NavEdit from '@/pages/front/navigation/NavEdit';
import {
  editNavigationByDelete,
  findNavigationByPageList,
} from '@/services/advertising';
import { getResult } from '@/services/sys/attribute';
import { findByDataCategoryListPageSelect } from '@/services/sys/MenuService';
import { ProFormInstance } from '@ant-design/pro-form';
import MyUpload from '../../../components/MyUpload';

const getAttr = async (key: string) => {
  let result = await getResult(key, 1);
  return result;
};
const request1 = async () => {
  return new Promise<API.SelectItem[]>((resolve, reject) => {
    findByDataCategoryListPageSelect()
      .then((res) => {
        let selectItems = res;
        selectItems.unshift({ label: '下一单', value: '' });
        resolve(selectItems);
      })
      .catch((e) => {});
  });
};

const columns = [
  {
    title: '编号',
    key: 'id',
    dataIndex: 'id',
    search: false,
  },
  {
    title: '图片',
    key: 'image',
    dataIndex: 'image',
    valueType: 'image',
    search: false,
  },
  {
    title: '汉语名称',
    key: 'name',
    dataIndex: 'name',
  },
  {
    title: '维语名称',
    key: 'nameUg',
    dataIndex: 'nameUg',
  },
  {
    title: '目标类型',
    key: 'targetType',
    dataIndex: 'targetType',
    valueType: 'select',
    valueEnum: await getResult('advertisingTargetType', 0),
  },
  {
    title: 'APPID',
    key: 'appid',
    dataIndex: 'appid',
  },
  {
    title: '操作',
    key: 'option',
    valueType: 'option',
    render: (
      _: any,
      row: {
        id: number | undefined;
        isPay: number | undefined;
        paymentStatus: number | undefined;
      },
      index: any,
      action: any,
    ) => [
      <NavEdit row={row} key={index}></NavEdit>,
      <Button
        key="link"
        type={'primary'}
        danger={true}
        onClick={(a) => {
          editNavigationByDelete(row.id)
            .then((res) => {
              message.success('删除成功');
              action.reload();
            })
            .catch((e) => {
              message.error('删除失败');
            });
        }}
      >
        删除
      </Button>,
    ],
  },
];

const Page: React.FC = () => {
  const [params, setParams] = useState<any>();
  const formRef = useRef<ProFormInstance>();
  const [editDialg, setEditDialg] = React.useState(false);
  //  const [columns, setColumns] = useState ( column );
  // const [columnDialogs, setColumnDialogs] = useState ( columnDialog );
  const [menuInfo, setMenuInfo] = useState<API.MenuInfo>();

  function editDialogInfo(
    row: {
      id: number | undefined;
      isPay: number | undefined;
      paymentStatus: number | undefined;
    },
    index: any,
  ) {
    formRef?.current?.setFieldsValue(row);
    setEditDialg(true);
  }

  function hideEditDialg() {
    formRef.current?.resetFields();
  }

  function openEditDialg() {
    formRef.current?.resetFields();
    setEditDialg(true);
  }

  const columnDialogs = [
    {
      title: '编号',
      key: 'id',
      dataIndex: 'id',
      search: false,
      formItemProps: {
        hidden: true,
      },
    },
    {
      title: '编号',
      key: 'imageId',
      dataIndex: 'imageId',
      search: false,
      formItemProps: {
        hidden: true,
      },
    },
    {
      title: '基本信息',
      valueType: 'group',
      columns: [
        {
          title: '图片',
          key: 'image',
          dataIndex: 'image',
          valueType: 'image',
          width: 'md',
          renderFormItem: (item: any, f: any, form: any) => {
            const image = form.getFieldValue('image');
            const id = form.getFieldValue('id');
            return (
              <>
                {' '}
                <MyUpload
                  type={5}
                  url={image}
                  id={id}
                  onChange={(event) => {
                    console.log('MyUpload', event);
                    formRef.current?.setFieldsValue({ imageId: event });
                  }}
                ></MyUpload>
              </>
            );
          },
        },
        {
          title: '汉语名称',
          key: 'name',
          dataIndex: 'name',
          width: 'md',
        },
        {
          title: '维语名称',
          key: 'nameUg',
          dataIndex: 'nameUg',
          width: 'md',
        },
        {
          title: '目标类型',
          key: 'targetType',
          dataIndex: 'type',
          valueType: 'select',

          request: async () => {
            return await getResult('advertisingTargetType', 1);
          },
          width: 'md',
        },
        {
          title: '地址',
          dataIndex: 'path',
          key: 'path',
          width: 'sm',
          valueType: 'select',
          request: request1,
        },
        {
          title: 'APPID',
          key: 'appid',
          dataIndex: 'appid',
          width: 'md',
        },
        {
          title: '备注',
          key: 'remark',
          dataIndex: 'remark',
          valueType: 'textarea',
          width: 'md',
        },
      ],
    },
  ];

  return (
    <>
      <MyTable
        request={findNavigationByPageList}
        search={false}
        cardBordered={true}
        columns={columns}
        toolbar={() => [<NavEdit row={{ id: 0 }} key={0}></NavEdit>]}
      ></MyTable>
    </>
  );
};

export default Page;
